<template>
  <div class="Paddnew">
    <Pheader class="tou" msg="添加新地址"></Pheader>
    <div class="shouhuo">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="收货人姓名" prop="name">
          <el-input id="shouhuoName" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="area">
          <el-input id="shouhuoCity" v-model="ruleForm.area"></el-input>
          <!-- <areaShow></areaShow> -->
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input id="shouhuoArea" v-model="ruleForm.address"></el-input>
        </el-form-item>
        <p class="mobilTel">
          <el-form-item id="shouhuoTel" label="联系电话" prop="tel">
            <el-input v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item id="shouhuoTelphone" label="或固定电话" prop="telphone">
            <input type="text" class="input1" />
            -
            <input type="text" v-model="ruleForm.telphone" class="input2" />
          </el-form-item>
        </p>
        <el-form-item>
          <input type="radio" />
          <span>设置为默认地址</span>
        </el-form-item>
        <p class="save">
          <Pbutton msg="保存" @click="submitForm('ruleForm')"></Pbutton>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
//头部小组件
import Pheader from "@/components/P_header.vue";
// 地区三联动组件
// import areaShow from "@/components/areaShow.vue";
// 引入button小按钮
import Pbutton from "@/components/P_button.vue";
import Qs from "qs";
export default {
  components: {
    Pheader,
    // areaShow,
    Pbutton
  },
  data() {
    // 手机号码验证
    var isMobileNumber = (rule, value, callback) => {
      if (!value) {
        return new Error("请输入电话号码");
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        const isPhone = reg.test(value);
        value = Number(value); //转换为数字
        if (typeof value === "number" && !isNaN(value)) {
          //判断是否为数字
          value = value.toString(); //转换成字符串
          if (value.length < 0 || value.length > 12 || !isPhone) {
            //判断是否为11位手机号
            callback(new Error("手机号码格式如:138xxxx8754"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请输入电话号码"));
        }
      }
    };
    // 座机号验证
    var isTelOrFax = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^(\d{3,4}-)?\d{7,8}$/;
        const isTel = reg.test(value);
        if (value.length < 10 || value.length > 13 || !isTel) {
          //判断传真字符范围是在10到13
          callback(new Error("座机或传真格式如:0376-1234567"));
        } else {
          callback();
        }
      }
    };
    return {
      ruleForm: {
        name: "",
        area: "",
        address: "",
        tel: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入收货人姓名",
            trigger: "blur"
          },
          {
            min: 1,
            max: 5,
            message: "长度在 1 到 5 个字符",
            trigger: "blur"
          }
        ],
        area: [
          {
            required: true,
            message: "请选择地区",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "请填写地址",
            trigger: "blur"
          }
        ],
        tel: [
          {
            required: true,
            message: "请填写电话号码",
            trigger: "change"
          },
          {
            validator: isMobileNumber,
            trigger: "blur"
          }
        ],
        telPhone: [
          {
            required: true,
            message: "请输入座机号",
            trigger: "blur"
          },
          {
            validator: isTelOrFax,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          alert("submit!");
          var _this = this;
          let data = Qs.stringify({
            addName: ruleForm.name,
            addCity: ruleForm.area,
            addStree: ruleForm.address,
            addPhone: ruleForm.tel,
            addBeizhu: "随便什么东西"
          });
          //   this.isShow = !this.isShow;
          this.$axios({
            method: "post",
            url: "http://localhost:3000/recentlook/addressadd",
            data: data,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
            .then(response => {
              _this.list = response.data.result;
              _this.code = response.data.code;
              window.console.log(_this.list);
            })
            .catch(function(error) {
              _this.data = error;
            });
        } else {
          window.console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style>
.Paddnew {
  width: 100%;
  height: 488px;
  border: 1px solid #e7e7e7;
  /* margin-left:1%; */
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
  overflow: hidden;
  z-index: 2;
}
.Paddnew .tou {
  padding: 13px 13px;
  border-bottom: 1px solid #e7e7e7;
  /* display:flex; */
}
.shouhuo {
  margin-top: 35px;
}

.shouhuo .el-form-item__label {
  color: #333;
}

.shouhuo .el-input__inner {
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  border: 1px solid #d3d3d3;
}

.shouhuo .save {
  margin-left: 100px;
  margin-bottom: 186px;
}

.shouhuo {
  margin-left: 30px;
}

.shouhuo #shouhuoName,
#shouhuoCity {
  width: 31.28%;
}

.shouhuo #shouhuoArea {
  width: 43.6%;
}

.shouhuo #shouhuoTel {
  width: 26.22%;
}

.mobilTel .el-form-item {
  display: inline-block;
}

.shouhuo .el-form-item {
  margin-bottom: 18px;
}
.shouhuo #shouhuoTelphone .el-form-item__content .input1 {
  border: 1px solid #d3d3d3;
  width: 11.36%;
  height: 35px;
  line-height: 35px;
}
.shouhuo #shouhuoTelphone .el-form-item__content .input2 {
  border: 1px solid #d3d3d3;
  width: 22.65%;
  height: 35px;
  line-height: 35px;
}
</style>
